<template>
  <div class="page-bg">
    <div class="container">
      <h2 class="market-title">NFT 市场</h2>
      <div v-if="loading" class="center-msg">
        <span class="loading-dot"></span> 正在加载 NFT...
      </div>
      <div v-else-if="nfts.length === 0" class="center-msg empty-card">
        <span style="font-size:2em;vertical-align:-8px;">🗂️</span>
        <div>暂无在售 NFT</div>
      </div>
      <div class="nft-grid">
        <div
          v-for="nft in nfts"
          :key="nft.tokenId"
          class="nft-card"
        >
          <div class="nft-img-wrap">
            <img
              :src="getNftImage(nft.tokenURI)"
              @error="e => e.target.src = 'https://placehold.co/400x400?text=NFT'"
              class="nft-img"
            />
          </div>
          <div class="nft-id">
            <span class="tag">#{{ nft.tokenId }}</span>
          </div>
          <div class="nft-uri" :title="nft.tokenURI">{{ nft.tokenURI }}</div>
          <div class="nft-price">
            <span class="eth-logo"></span>
            <span>{{ fromWei(nft.price) }}</span> ETH
          </div>
          <button
            class="buy-btn"
            @click="handleBuyNft(nft.tokenId, nft.price)"
            :disabled="buyingId === nft.tokenId"
          >
            {{ buyingId === nft.tokenId ? "购买中..." : "立即购买" }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getAllListedItems, buyNft } from "../utils/contract";
import { ethers } from "ethers";

const nfts = ref([]);
const loading = ref(true);
const buyingId = ref(0);

onMounted(fetchNfts);

async function fetchNfts() {
  loading.value = true;
  try {
    const list = await getAllListedItems();
    nfts.value = Array.isArray(list) ? list : [];
  } catch (e) {
    alert("获取NFT失败：" + (e.data?.message || e.message));
    nfts.value = [];
  }
  loading.value = false;
}

function fromWei(wei) {
  return ethers.formatEther(wei || "0");
}

function getNftImage(tokenURI) {
  if (tokenURI && (tokenURI.endsWith(".png") || tokenURI.endsWith(".jpg") || tokenURI.endsWith(".jpeg"))) {
    return tokenURI;
  }
  return tokenURI || "https://placehold.co/400x400?text=NFT";
}

async function handleBuyNft(tokenId, price) {
  if (!window.ethereum) return alert("请先安装并连接钱包");
  try {
    buyingId.value = tokenId;
    await buyNft(tokenId, price);
    alert("购买成功！");
    await fetchNfts();
  } catch (e) {
    alert("购买失败：" + (e.data?.message || e.message));
  }
  buyingId.value = 0;
}
</script>

<style scoped>
/* 整体背景与居中容器 */
.page-bg {
  background: #f7f8fa;
  min-height: 100vh;
  padding: 0;
}
.container {
  max-width: 950px;
  margin: 40px auto;
  background: #fff;
  box-shadow: 0 6px 32px rgba(50,60,80,0.08);
  border-radius: 22px;
  padding: 40px 28px 30px;
}

/* 标题商务感 */
.market-title {
  font-size: 2.3rem;
  font-weight: 700;
  color: #21344c;
  text-align: center;
  margin-bottom: 32px;
  letter-spacing: 2px;
}

/* 空态、加载中居中美化 */
.center-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #5e6373;
  font-size: 1.15rem;
  margin: 60px 0 36px 0;
}
.empty-card {
  background: #f0f4f9;
  border-radius: 12px;
  padding: 32px 0;
}

/* loading 点动画 */
.loading-dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #5185e8;
  margin-right: 10px;
  animation: bounce 0.9s infinite alternate;
  vertical-align: middle;
}
@keyframes bounce {
  to { transform: translateY(-8px); opacity: .6; }
}

/* NFT 网格卡片区 */
.nft-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-top: 16px;
}
@media (min-width: 700px) {
  .nft-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 卡片样式 */
.nft-card {
  background: #fafdff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(120,130,160,0.07);
  border: 1.5px solid #e8e9f2;
  padding: 24px 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow .23s, transform .22s;
  position: relative;
}
.nft-card:hover {
  box-shadow: 0 8px 24px rgba(50,60,80,0.13);
  transform: translateY(-2px) scale(1.025);
}

/* 图片及外框 */
.nft-img-wrap {
  border: 2.5px solid #e5e7ee;
  border-radius: 12px;
  box-shadow: 0 1.5px 8px rgba(100,110,150,0.08);
  overflow: hidden;
  margin-bottom: 16px;
  width: 154px;
  height: 154px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8faff;
}
.nft-img {
  width: 148px;
  height: 148px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform .19s;
}
.nft-card:hover .nft-img {
  transform: scale(1.06);
}

/* NFT编号标签 */
.nft-id .tag {
  background: #e9eef6;
  color: #275aac;
  font-size: 1.07em;
  font-weight: 600;
  padding: 2px 14px 2px 11px;
  border-radius: 10px;
  letter-spacing: 1px;
  margin-bottom: 6px;
  display: inline-block;
}

/* tokenURI 展示优化 + tooltip */
.nft-uri {
  max-width: 120px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #8a97b7;
  font-size: .96em;
  margin-bottom: 8px;
  cursor: pointer;
}

/* 价格区域 */
.nft-price {
  font-size: 1.1em;
  font-weight: 600;
  color: #273e5c;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.eth-logo {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background: url("data:image/svg+xml;utf8,<svg fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' xmlns='http://www.w3.org/2000/svg'><path d='M12 2v20m0-20l7 12-7 4-7-4 7-12z' stroke='%235185e8'/></svg>") center/contain no-repeat;
  margin-right: 4px;
  vertical-align: -2px;
}

/* 购买按钮商务风 */
.buy-btn {
  background: #376ee6;
  color: #fff;
  font-size: 1.06em;
  font-weight: 600;
  border: none;
  border-radius: 13px;
  padding: 9px 0;
  width: 95%;
  margin-top: 7px;
  box-shadow: 0 1px 3px rgba(80,120,200,0.07);
  cursor: pointer;
  transition: background .18s, box-shadow .18s, opacity .16s;
}
.buy-btn:hover:enabled {
  background: #2656ba;
  box-shadow: 0 3px 10px rgba(80,120,200,0.13);
}
.buy-btn:disabled {
  background: #b6c6e5;
  color: #ecf0fa;
  opacity: .68;
  cursor: not-allowed;
  box-shadow: none;
}

@media (max-width: 600px) {
  .container {
    padding: 17px 4vw 13vw;
  }
  .nft-img-wrap { width: 100px; height: 100px;}
  .nft-img { width: 96px; height: 96px;}
  .nft-uri { max-width: 65px;}
  .market-title { font-size: 1.45rem; }
}
</style>
